<template>
    <div class="list">
        <div class="price">
            ￥{{item.price}}
        </div>
        <section>
            <p>{{item.title}}</p>
            <p>{{item.limit}}天内使用</p>
        </section>
        <!-- item.status 为1 证明没有使用  为2 就证明已经使用 -->
                                                   <!-- 点击时候  item.status = 2不是判断是赋值 -->
        <button class="using" v-if="item.status ==1" @click="item.status = 2">去使用</button>
        <button class="used" v-if="item.status ==2" @click="item.status = 1">已使用</button>
    </div>
</template>
<script>
export default {
    props:['item']
}
</script>
<style lang="scss" scoped>
.list{
    display: flex;
    margin: 10px;
    padding: 0 20px;
    align-items: center;
    section{
        flex:1;
        margin: 0 20px;
    }
    .price{
        height: 100px;
        width:120px;
        background: #c00;
        line-height: 100px;
        text-align: center;
        border-radius: 8px 0 0 8px;
        color:#fff;
        font-size: 30px;
    }
}
.using{
    background: #c00;
    border: none;
    color: #fff;
}
</style>

